<template>
	<view>
		<u-navbar :title='title'></u-navbar>
		<view class="content">
			<view class="down" v-if="hasObj">
				<template>
					<waterfallsFlow :list="activeList" @image-click="inprov" class="u-relative">
						<!-- <template v-slot:default="item"> -->
						<template v-slot="{item}">
							<!-- 此处添加插槽内容 -->
							<image src="../../static/img/top_icon.png" class="tops_icon" mode="aspectFit"
								v-show="item.isTop==1"></image>
							<view class="cnt u-rela">
								<image src="../../static/img/logofinal.png" mode="aspectFit" class="u-abso playicon"
									style="width: 40rpx;height: 40rpx;border-radius:0 50%;"
									@click="gotoVideoPage(item)">
								</image>
								<view class="title u-m-t-20">
									<!-- <u-icon name="thumb-up-fill" class="u-m-r-10" size="32" color="#e85456" v-show="item.isTop==1"></u-icon> -->
									<span class="" @click="gotoVideoPage(item)">{{item.videoTitle}}</span>
								</view>
								<view class="demo-tag">
									<view class="tagss" @click="gotoVideoPage(item)">
										<image src="../../static/img/logofinal.png" mode="aspectFit"
											style="width: 60rpx;height: 60rpx;border-radius: 50%;"></image>
										<span class="u-line-1 tit">国产二价宫颈ddd癌疫啦啦啦</span>
									</view>
									<p class="icons" @click.stop="$noMultipleClicks(getVideoLikes, item)">
										<u-icon size="40" color="#e85456" name="heart-fill"
											style="animation-duration: 500ms" class="animated bounceIn"
											v-show="item.hasLikes==1"></u-icon>
										<u-icon size="40" color="#e85456" name="heart" v-show="item.hasLikes!=1">
										</u-icon>
										<span class="u-m-l-10 u-font-sm" v-show="item.thumbs!=0">{{item.thumbs}}</span>
									</p>
									<p class="icons" @click.stop="$noMultipleClicks(getCollection, item)">
										<u-icon size="40" color="#F8CB4F" name="star" v-show="item.hasCollection!=1">
										</u-icon>
										<u-icon size="40" color="#F8CB4F" name="star-fill"
											style="animation-duration: 200ms" class="animated bounceIn"
											v-show="item.hasCollection!=0"></u-icon>
										<span class="u-m-l-10 u-font-sm"
											v-show="item.thumbs!=0">{{item.collection}}</span>
									</p>
									<!-- 										<p class="icons u-m-l-20" @click.stop="$noMultipleClicks(getCollection, item)">
													<u-icon size="40" color="#F8CB4F" name="star" v-show="item.hasCollection!=1">
													</u-icon>
													<u-icon size="40" color="#F8CB4F" name="star-fill" style="animation-duration: 200ms"
														class="animated bounceIn" v-show="item.hasCollection!=0" >
													</u-icon>
													<span class="u-m-l-10 u-font-sm"
														v-show="item.collection!=0">{{item.collection}}</span>
												</p> -->
								</view>
								<!-- 										<view class="demo-tag">
											<ul class="icons u-flex" style="zoom: 0.4;">
												<li class="u-flex" @click="getVideoLikes(item,item.index)">
													<u-icon size="90" color="#e85456" name="heart" v-if="item.hasLikes!=1"></u-icon>
													<u-icon size="90" color="#e85456" name="heart-fill"
														style="animation-duration: 500ms" class="animated bounceIn" v-else></u-icon>
													<span class="u-m-l-10 likeorcoll" v-show="item.thumbs!=0">{{item.thumbs}}</span>
												</li>
												<li class="u-flex" @click="getCollection(item,item.index)">
													<u-icon size="90" color="#F8CB4F" name="star" v-if="item.hasCollection!=1">
													</u-icon>
													<u-icon size="90" color="#F8CB4F" name="star-fill"
														style="animation-duration: 200ms" class="animated bounceIn" v-else>
													</u-icon>
													<span class="u-m-l-10 likeorcoll"
														v-show="item.collection!=0">{{item.collection}}</span>
												</li>
											</ul>
										</view> -->

							</view>
						</template>
					</waterfallsFlow>
				</template>
			</view>
			<view class="down" v-else>
				<u-empty text="暂无视频" mode="data" class="empty_center_icon"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		components: {
			waterfallsFlow
		},
		data() {
			return {
				title: '', //专题名称
				themeId: '', //专题id
				activeList: [],
				hasObj: true,
				noClick: true,
				page: {}
			};
		},
		onLoad(option) {
			console.log(option)
			this.title = option.title
			this.themeId = option.id
			this.getThemeIdVideo()
		},
		onBackPress(e) {
			uni.switchTab({
				url: "/pages/serve/serverIndex",
			});
			return true;
		},
		onReachBottom() {
			console.log(this.page)
			if (this.page.isLastPage) return;
			this.getMoreListInfo(this.page.pageNum + 1);
		},
		methods: {
			inprov: function(item) { //子触父事件
				let obj = {
					specialName: this.title
				}
				let obj1 = item
				let finobj = Object.assign(obj, obj1)
				console.log(finobj)
				this.gotoVideoPage(finobj)
			},
			gotoVideoPage(v) {
				console.log(v)
				const {
					id,
					videoTitle,
					videoUrl,
					createTime,
					hasLikes,
					hasCollection,
					specialName
				} = v //拿需要的数据

				// uni.navigateTo({
				// 	url: `videoinfo_page?id=${id}&vTitle=${videoTitle}&vUrl=${videoUrl}&cTime=${createTime}&likenum=${hasLikes}&collect=${hasCollection}`
				// })
				uni.navigateTo({
					url: `videoinfo_page?obj=${encodeURIComponent(JSON.stringify(v))}`
				})
			},
			//根据专题id获取视频
			getThemeIdVideo() {
				this.config.get('/projectionHall/getVideoListBySpecialId', {
					pageNum: 1,
					pageSize: 10,
					specialId: this.themeId
				}).then(res => {
					console.log(res)
					this.page = res.data.data;
					if (res.data.data.hasOwnProperty('list')) {
						let resData = res.data.data.list
						this.activeList = this.activeList.concat(resData)
						this.hasObj = true
					} else {
						this.activeList = []
						this.hasObj = false
					}
				})
			},
			getMoreListInfo(pageNumber) {
				console.log(pageNumber+'。。。。。')
				this.loadtype = true;
				// uni.showLoading({title: '加载中',mask: true});
				let self = this;
				this.config
					.get("/projectionHall/getVideoListBySpecialId", {
						pageNum: pageNumber ? pageNumber : "1",
						pageSize: "10",
						specialId: this.themeId
					})
					.then((res) => {
						// uni.hideLoading();
						if (res.data.code === 200) {
							this.page = res.data.data;
							let resData = res.data.data.list || [];
							this.activeList.push(...resData)
						} else {
							if (res.data.code == "-201") {
								self.config.handleError(res.data);
							} else {
								uni.showToast({
									title: self.config.handleError(res.data),
									icon: "none",
								});
							}
						}
					});
			},
			//视频点赞
			getVideoLikes(obj) {
				this.config.get('/projectionHall/giveVideoLikes', {
					videoId: obj.id
				}).then(res => {
					let idx = obj.index
					const atobj = this.activeList[idx]
					atobj.hasLikes = !atobj.hasLikes
					if (atobj.hasLikes == false && atobj.thumbs > 0) {
						atobj.thumbs = atobj.thumbs - 1;
					} else {
						atobj.thumbs = atobj.thumbs + 1;
					}
				})
			},
			getCollection(obj) {
				this.config.get('/projectionHall/giveVideoCollection', {
					videoId: obj.id
				}).then(res => {
					let idx = obj.index
					const atobj = this.activeList[idx]
					atobj.hasCollection = !atobj.hasCollection
					if (atobj.hasCollection == false && atobj.collection > 0) {
						atobj.collection = atobj.collection - 1;
					} else {
						atobj.collection = atobj.collection + 1;
					}
				})
			},
		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss">
	.title {
		text-align: left;
	}

	.cnt {
		padding: 20rpx;
		width: 100%;
		text-align: center;

		.playicon {
			left: -3px;
			bottom: 100%;
		}
	}


	uni-image.tops_icon {
		width: 38px;
		height: 31px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
		width: 100%;
		justify-content: space-between;
		align-items: center;

		.tagss {
			font-size: 20rpx;
			display: inline-flex;
			align-items: center;
			width: 63%;
			color: #757575;

			.tit {
				width: 160rpx;
			}
		}

		.icons {
			display: inline-flex;
			align-items: center;
			transform: scale(1);
		}
	}

	.likeorcoll {
		font-size: 28px;
	}
</style>
